<template>

  <Head />
  <div class="main">
    <div class="top-line">
      <div class="vip-tab">
        <div class="vip-tab_b">
          <div class="displa" v-for="(item, index) in nodeList" @click="goToSlide(index)" :key="index">
            <div :class="item.code == activeIndex ? 'vip-tab_size' : ''">
              {{ tempData[item.code]["title"] }}
            </div>
            <img :class="`img_wz ${item.code == activeIndex ? 'img_z' : ''}`" :src="index + 1 == activeIndex ? ydz : yd"
              alt="" />
          </div>
        </div>
        <img class="vip-tab_bj" src="@/assets/images/svip/jdt.png" alt="" />
      </div>
      <swiper :slidesPerView="1" class="my-swipe" :space-between="20" @slideChange="slideChange" @swiper="onSwiper"
        ref="swiperRef">
        <swiper-slide class="swiper-slide" v-for="item in nodeList" :key="item.id">
          <img class="swiper-slide-img" :src="tempData[item.code]['icon']" alt="" />
          <div class="title">
            {{ tempData[item.code]["title"] }}
          </div>
          <div class="money" :style="{ color: item.color }">
            {{ item.amount }}
          </div>
          <div class="last">
            {{ $t("remainingQuota") }}：<span>{{
              item.total - item.hasCount
              }}</span>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <div class="power">
      <div :class="['title', localStorage.get('lang')]">
        {{ $t("nodeEquity") }}
      </div>
      <div class="centent">
        <div class="item">
          <img src="@/assets/images/svip/qy.png" alt="" />
          <span>{{ currentInfo.amount }}</span>
        </div>
        <div class="item">
          <img src="@/assets/images/svip/dj.png" alt="" />
          <span>{{ tempData[activeIndex].gift }}</span>
        </div>
        <div class="item">
          <img src="@/assets/images/svip/jl.png" alt="" />
          <span>{{ tempData[activeIndex].pool }}%</span>
        </div>
        <div class="item">
          <img src="@/assets/images/svip/fh.png" alt="" />
          <span>{{ 5 }}%</span>
        </div>
      </div>
    </div>

    <div class="power">
      <div :class="['title', 'title2', localStorage.get('lang')]">
        {{ tempData[activeIndex]["title"] }}{{ $t("quota") }}
      </div>
    </div>
    <div class="schedule">
      <van-progress :percentage="Math.floor(
        (parseInt(currentInfo.hasCount) / parseInt(currentInfo.total)) * 100
      )
        " color="#ebc39d" stroke-width="36px" :pivot-text="`${currentInfo.hasCount}/${currentInfo.total}`" />
    </div>
    <div class="desc-content">
      <div class="desc-item">
        <div class="top">
          <img class="icon" src="@/assets/images/svip/bt.png" alt="" />
          <span class="tips">{{ $t("time") }} : {{ $t('nodeStartTime') }}</span>
        </div>
        <!-- <div class="bottom">
          
        </div> -->
      </div>
      <div class="desc-item">
        <div class="top">
          <img class="icon" src="@/assets/images/svip/bt.png" alt="" />
          <span class="tips" v-if="activeIndex != 3">{{ $t("profitTips") }}：</span>
          <span class="tips" v-else>{{ $t("profitTips1") }}：</span>
        </div>
        <!-- <div class="bottom">{{ $t("profitTips") }}</div> -->
      </div>
      <div class="desc-item">
        <div class="top">
          <img class="icon" src="@/assets/images/svip/bt.png" alt="" />
          <span class="tips">{{ $t("descriptionTips") }}：</span>
        </div>
        <!-- <div class="bottom">
          {{ $t("descriptionTips") }}
        </div> -->
      </div>
    </div>
    <div>
      <br>
      <van-row class="usdt-take-table">
        <van-col span="20">
          <van-row>
            <van-col span="8">{{ userInfo.user.nodeInviteBonus || '---' }} USDT</van-col>
            <van-col span="8">{{ userInfo.user.drawInviteBonus || '---' }} USDT</van-col>
            <van-col span="8">{{ (userInfo.user.nodeInviteBonus - userInfo.user.drawInviteBonus) || '---' }} USDT</van-col>
            <van-col span="8">{{ $t("Inviterewards") }}</van-col>
            <van-col span="8">{{ $t("hasTake") }}</van-col>
            <van-col span="8">{{ $t("canTake") }}</van-col>
          </van-row>
        </van-col>
        <van-col span="4"> <van-button class="take-btn" color="linear-gradient(to right, #ffe07b, #e8a22d)"
            size="normal" @click="takeUSDT">{{ $t("take") }}</van-button></van-col>
      </van-row>



    </div>
    <div class="submit">
      <van-button class="btn" v-if="userInfo != undefined" @click="onSubmit">


        <div v-if="userInfo.user.nodeLevel == activeIndex">
          {{ t(tempData[userInfo.user.nodeLevel].title) }}
        </div>
        <div v-if="userInfo.user.nodeLevel == 0">
          {{ $t("subscribeNow") }}
        </div>
        <div v-if="userInfo.user.nodeLevel > 0 && userInfo.user.nodeLevel < activeIndex">
          升级
        </div>


      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { localStorage } from "@/utils/local-storage";
import { useI18n } from "vue-i18n";
import { userStore } from "@/stores/modules/user";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Async_nodeinfo, Async_takeUSDT } from "@/server/user";
// import { FreeTime } from "@/utils/tool";
import { Contract } from "@/utils/wallet/contract";
import yd from "@/assets/images/svip/yd.png";
import ydz from "@/assets/images/svip/ydz.png";
import vipb1 from "@/assets/images/svip/vipb1.png";
import vipb2 from "@/assets/images/svip/vipb2.png";
import vipb3 from "@/assets/images/svip/vipb3.png";
import { showToast } from "vant";
// import { Checkbox, CheckboxGroup } from 'vant'
// import { FloatingBubble } from 'vant';
const { t } = useI18n();

let tempData = computed(() => {
  return {
    "1": {
      title: t("bronzeNode"),
      icon: vipb1,
      gift: t("node_gitf_1"),
      pool: t("node_pool_1"),
    },
    "2": {
      title: t("silverNode"),
      icon: vipb2,
      gift: t("node_gitf_2"),
      pool: t("node_pool_2"),
    },
    "3": {
      title: t("goldenNode"),
      icon: vipb3,
      gift: t("node_gitf_3"),
      pool: t("node_pool_3"),
    }
  };
});
const userInfo = userStore().info;
const data = reactive({
  swiperRef: null
});
const nodeList = ref([]);
const activeIndex = ref(1);
const currentInfo = ref({
  amount: "",
  level: "",
  levelRatio: 0,
  dividendRatio: 0,
  hasCount: "",
  total: "",
  endAt: "",
  startAt: ""
});
const slideChange = swiper => {
  activeIndex.value = swiper.activeIndex + 1;
  data.swiperRef.slideTo(swiper.activeIndex, 0);
  currentInfo.value = nodeList.value[swiper.activeIndex];
};
const onSwiper = (swiper: any) => {
  data.swiperRef = swiper;
};
const goToSlide = index => {
  activeIndex.value = index + 1;
  data.swiperRef.slideTo(index, 0);
  currentInfo.value = nodeList.value[index];
};

const getList = async () => {
  try {
    let res: any = await Async_nodeinfo();
    if (res) {
      nodeList.value = res.list.reverse() || [];
      if (nodeList.value.length > 0) {
        currentInfo.value = nodeList.value[activeIndex.value - 1];
      }
    }
  } catch (error) {
    console.error(error);
  }
};

// 立即认购
const onSubmit = (amount) => {
  if (userInfo.user.nodeLevel == 0) {
    amount = currentInfo.value.amount.toString()
  } else if (userInfo.user.nodeLevel > 0 && userInfo.user.nodeLevel < activeIndex.value) {
    amount = nodeList.value[activeIndex.value - 1].amount - userInfo.user.nodeAmount
    console.log("当前需要", nodeList.value[activeIndex.value - 1].amount, "用户已有", userInfo.user.nodeAmount)
  } else {
    return
  }
  console.log("需要amount", amount)
  Contract.recharge(
    String(amount)
  ).then((data) => showToast(t(data.message))).catch(e => showToast(e))
};

const takeUSDT = async ()=>{
  await Async_takeUSDT().then((data:any)=>{
    showToast(t(data.message))
  }).catch(e => showToast(e))
}


const onSubmitUpgrade = () => {
  console.log(nodeList.value[userInfo.user.nodeLevel].amount - userInfo.user.nodeAmount)
  Contract.recharge(
    String(nodeList.value[userInfo.user.nodeLevel].amount - userInfo.user.nodeAmount)
  ).then((data) => showToast(t(data.message))).catch(e => showToast(e))
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.main {
  background: url("@/assets/images/svip/bj.png") no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  padding: 30px 20px 82px 20px;

  .usdt-take-table {
    font-size: 12px;
    margin-top: 10px;
    width: 100%;
    color: white;
    text-align: center;

    .take-btn {
      text-align: center;
      height: 40px
    }

  }

  .top-line {
    position: relative;
    margin-bottom: 30px;

    .head {
      padding: 0 15px;
      display: grid;
      grid-template-columns: 38px auto;
      align-items: center;
      gap: 8px;
    }

    .vip-tab {
      margin-bottom: 12px;
      position: relative;

      .vip-tab_b {
        position: relative;
        z-index: 3;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        overflow-x: scroll;
        font-size: 10px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;

        .displa {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .img_wz {
          width: 6px;
          height: 6px;

          margin-top: 5px;
        }
      }

      .vip-tab_bj {
        position: absolute;
        left: 0px;
        bottom: 3px;
        width: 100%;
        height: 4px;
      }

      .vip-tab_size {
        font-size: 13px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }

      .img_z {
        width: 10px !important;
        height: 10px !important;
      }
    }

    .my-swipe {
      width: 100%;
      height: 145px;

      .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;

        .swiper-slide-img {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          z-index: -1;
          object-fit: fill;
        }

        .title {
          position: absolute;
          top: 20px;
          left: 20px;
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: bold;
        }

        .money {
          position: absolute;
          top: 62px;
          left: 20px;
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: bold;
          color: #666666;
        }
      }

      .last {
        position: absolute;
        bottom: 20px;
        left: 20px;

        span {
          color: red;
          font-weight: bold;
        }
      }
    }
  }

  .power {
    .title {
      width: 198px;
      height: 22px;
      background: url("@/assets/images/svip/xbt.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 9px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      color: #ebc39d;
      text-align: center;
      line-height: 22px;
      font-size: 16px;
      letter-spacing: 16px;
      padding-left: 20px;

      &.en {
        letter-spacing: 0;
      }
    }

    .title2 {
      letter-spacing: 5px;
      padding-left: 8px;

      &.en {
        padding-left: 0px;
        letter-spacing: 0;
      }
    }

    .centent {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 30px;

      .item {
        position: relative;

        img {
          width: 100%;
        }

        span {
          position: absolute;
          left: 80%;
          width: 100%;
          transform: translateX(-50%);
          color: 12px;
          color: #dca261;
          bottom: 10px;
          font-size: 12px;
        }
      }
    }
  }

  .schedule {
    width: 100%;
    bottom: 14px;
    left: 0;
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-bottom: 30px;
  }

  .desc-content {
    width: 100%;
    flex: 1;
    background: #fff2e9;
    border-radius: 15px;
    padding: 15px;

    .desc-item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .top {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 8px;

        .icon {
          width: 13px;
          height: 13px;
        }

        .tips {
          font-size: 13px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
        }
      }

      .bottom {
        padding-left: 17px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666;
        line-height: 18px;
      }
    }
  }

  .submit {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #11202f;
    padding: 10px;
    display: flex;
    align-items: center;

    .btn {
      width: 100%;
      height: 42px;
      background: linear-gradient(to right, #ffe07b, #e8a22d);
      font-size: 15px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      border-radius: 20px;
      letter-spacing: 5px;
    }
  }
}

::v-deep .van-progress {
  border-radius: 1000px !important;
  overflow: hidden;
}

::v-deep .van-progress__portion {
  border-radius: 1000px !important;
}

::v-deep .van-progress__pivot {
  text-align: center;
}
</style>
